<!-- 文件所有权归北京优博泰克 -->
<!-- 模拟利润-->
<template>
    <div v-loading="loading" element-loading-text="数据加载中" element-loading-background="rgba(0, 0, 0, 0.5)">
    <div class="pagebox">
      <div class="tablename borderleri">
        <p>模拟利润</p>
      </div>
      <!-- 表格菜单 -->
      <div class="elMenu borderleri">
        <el-menu :default-active="menuindex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          background-color="#F5F7FA" text-color="#8492A6" active-text-color="#0165B4">
          <el-menu-item index="all">全部</el-menu-item>
          <el-menu-item index="vehicle">车辆试验部</el-menu-item>
          <el-menu-item index="craft">工艺研究所</el-menu-item>
          <el-menu-item index="powerAssembly">动力总成部</el-menu-item>
          <el-menu-item index="bodywork">车身开发部</el-menu-item>
          <el-menu-item index="chassis">底盘开发部</el-menu-item>
          <el-menu-item index="electronicControl">电控开发部</el-menu-item>
          <el-menu-item index="commodity">先行商品开发部</el-menu-item>
        </el-menu>
        <div class="linemenu"></div>
      </div>
      <!-- 表格菜单 -->
      <!-- 年份 -->
      <div class="year">
        <!-- <i class="el-icon-arrow-left" @click="change('down')"></i> -->
        <span>{{year + "年"}}</span>
        <!-- <i class="el-icon-arrow-right" @click="change('add')"></i> -->
      </div>
      <!-- 月份 -->
      <div class="month">
        <div class="month-box" v-for="(item,idx) in monthList" :key="idx" :class="{'edit_box':item.flag}">
          <div class="title">
            <span>{{item.month + "月"}}</span>
            <i class='el-icon-edit' @click="edit(idx)" v-if="!item.flag&&menuindex!='all'"></i>
            <!-- 编辑显示 -->
            <div v-if="item.flag&&menuindex!='all'" class="edit-btn">
              <i class='el-icon-error' @click="close(idx)" style="color:#F56C6C"></i>
              <i class='el-icon-success' @click="submit(idx)" style="color:#67C23A"></i>
            </div>
          </div>
          <div class="estimate" v-if="item.present">
            <span>日预估成本:</span>
            <span v-if="!item.flag">{{item.day_plan_cost}}</span>
            <el-input-number v-model="item.day_plan_cost" controls-position="right" :min="0"  size='mini' v-else @change="changeday_price(idx)"></el-input-number>
          </div>
          <div class="content" v-if='!item.present'>
            <div class="content-item">
              <span>收入</span>
              <span v-if='!item.flag' class="color">{{item.income}}</span>
              <el-input v-model="item.income" placeholder="请输入" size="mini" style="width:90%;" @change="changeprice(idx)" v-else></el-input>
            </div>
            <div class="content-item">
              <span>实际成本</span>
              <span v-if='!item.flag' class="color">{{item.real_cost}}</span>
              <el-input v-model="item.real_cost" placeholder="请输入" size="mini" style="width:90%;" @change="changereal_cost(idx)" v-else></el-input>
            </div>
            <div class="content-item">
              <span>利润</span>
              <span  class="color">{{item.profit}}</span>
            </div>
          </div>
          <!-- 当前月 -->
          <div class="content" v-if="item.present">
            <div class="content-item">
              <span>月预估收入</span>
              <span  class="color">{{item.month_plan_income}}</span>
            </div>
            <div class="content-item">
              <span>月预估成本</span>
              <span  class="color">{{item.month_plan_cost}}</span>
            </div>
            <div class="content-item">
              <span>利润</span>
              <span  class="color">{{item.profit}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'DfcvDtmsVueAa',

    components: {  },

    directives: {  },

    data() {
        this.department_no = [{
          key:"",
          value:"all"
          },{
          key:"3328",
          value:"vehicle"
          },{
          key:"332G",
          value:"craft"
          },{
          key:"3327",
          value:"powerAssembly"
          },{
          key:"3325",
          value:"bodywork"
          },{
          key:"332F",
          value:"chassis"
          },{
          key:"332E",
          value:"electronicControl"
          },{
          key:"3326",
          value:"commodity"
          }] //部门编号
        return {
          loading:false,
          menuindex: "all",
          year:null,
          monthList:[],
          tempArr:[],//零时数组
          monthData:null,
        }
    },

    mounted() {
      this.getYear()
      this.getMonth()
    },

    methods: {
      //获取当前年
      getYear(){
        let date = new Date()
        this.year = `${date.getFullYear()}`
      },

      //table栏切换
      handleSelect(key){
        this.menuindex = key
        let idx = this.department_no.filter(it => it.value === this.menuindex)
        if(idx && idx.length){
          this.getMonth(this.year,idx[0].key) //重新获取数据
        }
      },


      //年份发生改变时触发
      change(v){
        if(v === "down"){
          // 减少
          this.year--
        }else{
          // 增加
          this.year++
        }
        let idx = this.department_no.filter(it => it.value === this.menuindex)
        if(idx && idx.length){
          this.getMonth(this.year,idx[0].key) //重新获取数据
        }
      },

      //获取当前几个月份
      async getMonth(year = null,key = ""){
        this.loading = true
        let arr = []
        let date = new Date()
        let num = date.getMonth() + 1 //现在几月
        for(let i = 1;i <= num;i++){
          let obj = {}
          obj.month = `${i}` //几月
          obj.income = 0 //收入
          obj.real_cost = 0 //成本
          obj.profit = 0 //利润
          obj.month_plan_income = 0 //月预估收入
          obj.month_plan_cost = 0 //月预估成本
          obj.day_plan_cost = 0 //日预估成本
          obj.flag = false //是否编辑
          if(i === num){
            //当前月
            obj.present = true
          }
          arr.push(obj)
        }
        //参数
        let data = {}
        if(key){
          data.department = key
        }
        data.year = year?year:date.getFullYear()//年份
        let res = await this.commonV.methods.getaxiosdata("simulateincome",data)
        if(res){
          this.monthData = JSON.parse(JSON.stringify(res))
          //返回有数据
          if(this.monthData && this.monthData.length){
            if(this.menuindex === "all"){
              let monthArr = [],dataArr = []
              this.monthData.forEach(item => {
                let idx = monthArr.indexOf(item.month)
                if(idx === -1){
                  //如果不存在就添加
                  monthArr.push(item.month)//添加月份
                  dataArr.push(item) //添加数据
                }else{
                  //存在就叠加
                  dataArr[idx].income = parseFloat(dataArr[idx].income) + parseFloat(item.income)
                  dataArr[idx].month_plan_cost = parseFloat(dataArr[idx].month_plan_cost) + parseFloat(item.month_plan_cost)
                  dataArr[idx].profit = parseFloat(dataArr[idx].profit) + parseFloat(item.profit)
                  dataArr[idx].month_plan_income = parseFloat(dataArr[idx].month_plan_income) + parseFloat(item.month_plan_income)
                  dataArr[idx].real_cost = parseFloat(dataArr[idx].real_cost) + parseFloat(item.real_cost)
                  dataArr[idx].day_plan_cost = parseFloat(dataArr[idx].day_plan_cost) + parseFloat(item.day_plan_cost)
                }
              })
              this.monthData = JSON.parse(JSON.stringify(dataArr))
            }
            // console.log(this.monthData)
            //非全部
            for(let j=0;j<this.monthData.length;j++){
              for(let k=0;k<arr.length;k++){
                if(arr[k].month === this.monthData[j].month){
                  arr[k].income = this.monthData[j].income
                  arr[k].month_plan_cost = this.monthData[j].month_plan_cost
                  arr[k].month_plan_income = this.monthData[j].month_plan_income
                  arr[k].day_plan_cost = this.monthData[j].day_plan_cost
                  arr[k].id = this.monthData[j].id
                  arr[k].profit = this.monthData[j].profit
                  arr[k].real_cost = this.monthData[j].real_cost
                }
              }
            }
          }
          this.monthList = JSON.parse(JSON.stringify(arr)) //内容
          this.loading = false
        }
      },

      //编辑按钮
      edit(idx){
        this.tempArr = JSON.parse(JSON.stringify(this.monthList)) //copy一份
        this.monthList[idx].flag = true
        this.tempArr[idx].flag = true
      },

      //关闭按钮
      close(idx){
        this.monthList[idx].flag = false
        this.tempArr[idx].flag = false
        this.monthList[idx] = this.tempArr[idx] //不变
      },

      //保存按钮
      async submit(idx){
        console.log(idx)
        console.log(this.monthList[idx])
        let date = new Date()
        let num = date.getMonth()
        let flag = true //效验
        let obj = {
          income:this.monthList[idx].income,
          real_cost:this.monthList[idx].real_cost,
          profit:this.monthList[idx].profit
        }
        if(idx === num){
          obj = {
            profit:this.monthList[idx].profit
          }
          //当前月
          obj.month_plan_income = this.monthList[idx].month_plan_income
          obj.month_plan_cost = this.monthList[idx].month_plan_cost
          obj.day_plan_cost = this.monthList[idx].day_plan_cost
        }
        // console.log(obj)
        //循环效验
        for(let key in obj){
          if(isNaN(obj[key])){
            flag = false
          }
        }
        //效验成功 重新赋值 并关闭编辑
        if(flag){
          if(idx !== num){
            this.monthList[idx].income = obj.income
            this.monthList[idx].real_cost = obj.real_cost
            this.monthList[idx].profit = obj.profit
            //复制一份
            this.tempArr[idx].income = obj.income
            this.tempArr[idx].real_cost = obj.real_cost
            this.tempArr[idx].profit = obj.profit
          }else{
            this.monthList[idx].month_plan_income = obj.month_plan_income
            this.monthList[idx].month_plan_cost = obj.month_plan_cost
            this.monthList[idx].profit = obj.profit
            this.monthList[idx].day_plan_cost = obj.day_plan_cost
            //复制一份
            this.tempArr[idx].month_plan_income = obj.month_plan_income
            this.tempArr[idx].month_plan_cost = obj.month_plan_cost
            this.tempArr[idx].profit = obj.profit
            this.tempArr[idx].day_plan_cost = obj.day_plan_cost
          }
          //如果有id patch方法  没有post方法
          if(this.monthList[idx].id){
            this.loading = true
            obj.id = this.monthList[idx].id
            let result = await this.commonV.methods.changeaxiosdata("simulateincome","PATCH",obj)
            if(result){
              this.$message({
                message: '操作成功!!',
                type: 'success'
              })
              this.monthList[idx].flag = false
              this.tempArr[idx].flag = false
              this.loading = false
            }
          }
        }else{
          this.$message({
            message: '请输入数字!!',
            type: 'warning'
          })
        }
      },

      //实际成本改变时触发
      changereal_cost(idx){
        let date = new Date()
        let num = date.getMonth()
        // 利润 = 收入 - 成本
        if(num === idx){
          //当前月
          if(!isNaN(this.monthList[idx].month_plan_income) && !isNaN(this.monthList[idx].month_plan_cost)){
            this.monthList[idx].profit = this.monthList[idx].month_plan_income - this.monthList[idx].month_plan_cost
          }
        }else{
          if(!isNaN(this.monthList[idx].income) && !isNaN(this.monthList[idx].real_cost)){
            this.monthList[idx].profit = this.monthList[idx].income - this.monthList[idx].real_cost
          }
        }
      },

      //收入改变时触发
      changeprice(idx){
        let date = new Date()
        let num = date.getMonth()
        // 利润 = 收入 - 成本
        if(num === idx){
          //当前月
          if(!isNaN(this.monthList[idx].month_plan_income) && !isNaN(this.monthList[idx].month_plan_cost)){
            this.monthList[idx].profit = this.monthList[idx].month_plan_income - this.monthList[idx].month_plan_cost
          }
        }else{
          if(!isNaN(this.monthList[idx].income) && !isNaN(this.monthList[idx].real_cost)){
            this.monthList[idx].profit = this.monthList[idx].income - this.monthList[idx].real_cost
          }
        }
      },

      //当前月日预估成本发生改变时触发
      changeday_price(idx){
        if(!isNaN(this.monthList[idx].day_plan_cost)){
          let day = new Date().getDate() //当前几号
          this.monthList[idx].month_plan_cost = day*this.monthList[idx].day_plan_cost //月预估收入
          this.monthList[idx].profit = this.monthList[idx].month_plan_income - this.monthList[idx].month_plan_cost //利润
        }
      }

    },
};
</script>

<style scoped>
  .pagebox {
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    /* padding: 20px; */
    /* border: 1px solid #D3DCE6; */
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    border-left: none;
    border-right: none;
    margin-top: 10px;

  }

  .londiv>>>.elTable {
    margin-top: 0 !important
  }



  .elMenu>>>.el-menu,
  .el-menu-item {
    background-color: #ffffff !important
  }

  .linemenu {
    width: 100%;
    height: 1px;
    background: rgba(211, 220, 230, 1);
  }

  .tablename {
    font-size: 18px;
    color: #1f2d3d;
    padding: 16px 20px 10px;
  }

  .year {
    height:50px;
    width:140px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    font-family: HelveticaNeue;
    color: #475669;
  }
  
  .year span {
    font-weight:700;
  }

  .year i {
    cursor: pointer;
  }

  .month {
    width:96%;
    margin:12px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }

  .month-box {
    width:385px;
    height:202px;
    margin:12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #F9FAFC;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }

  .title {
    width:90%;
    height:30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0 auto;
  }

  .title span {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 700;
    color: #1F2D3D;
  }
  
  .title i {
    cursor: pointer;
  }

  .title i:hover {
    color:#409EFF;
  }

  .content {
    width:100%;
    height:60%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .content .content-item {
    width: 96px;
    height: 82px;
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: center;
    background: rgba(239,242,247,0.45);
    border-radius: 3px;
  }

  .estimate {
    width:90%;
    margin:0 auto;
  }

  .color {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1F2D3D;
  }
  
  .edit-btn {
    width:11%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .edit-btn i {
    cursor: pointer;
  }

  .edit_box {
    background: rgba(32, 160, 255, 0.1);
    box-shadow: 0px 2px 4px 0px #E9F5FF;
    border-radius: 4px;
    border: 1px solid rgba(32, 160, 255, 0.35);
  }
</style>